@extends('Admin.index')

@section('css')
    <style>
        .col-sm-3{
            padding-right: 10px;
        }
    </style>

@endsection

@section('content')

    <div class="app-third-sidebar" >
        <nav class="ui-nav " style="display: block;">
            <ul>
                <li>
                    <a href="/admin/user"><span>用户</span></a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="wrapper">

        <div class="col-md-3">
            <div class="row">
                <button class="btn btn-success" type="button" onclick="Department.edit(1);">添加部门</button>
                <button class="btn btn-primary edit-department-btn" type="button" onclick="Department.edit(2);">编辑部门</button>
                <button type="button" class="btn btn-danger edit-department-btn" onclick="Department.del();">删除部门</button>
            </div>
            </br>
            <div class="row" id="department">
                <a href="javascript:;" class="list-group-item active" style="padding-left: 15px;" data-id="0">新墨</a>
                {!! $department_html !!}
            </div>
        </div>

        <!--右边表格-->
        <div class="col-md-9">

            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-md-8">
                            <button class="btn btn-success" type="button" onclick="User.edit('');">添加成员</button>
                        </div>
                        <div class="col-md-4">
                            <form class="form-inline" id="search-form" onsubmit="return false;">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="trueName" placeholder="请输入成员名称">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" name="search"  type="button">查询</button>
                                        <button class="btn btn-warning" name="to-reset" type="button">重置</button>
                                    </span>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="row">

                <div class="col-lg-12">
                    <div id="toolbar">

                    </div>
                    <table id="table"></table>
                </div>

            </div>


        </div>

        <div style="clear: both;"></div>

    </div>

@endsection

@section('js')

    <script>
        var department_select_html = '{!! $department_select_html !!}';
        var roles = {!! $role !!};
    </script>

    <script>

        $(function () {

            $(document).on('click', '#department a', function () {

                Department.id = $(this).attr('data-id');

                $('#department').find('a').removeClass('active').eq($(this).index()).addClass('active');

                if (Department.id == 0) {
                    $('.edit-department-btn').attr('disabled', true);
                } else {
                    $('.edit-department-btn').attr('disabled', false);
                }

                if (bootstrap_table_ajax_url != '') {
                    User.search();
                }

            });

            //顶级部门
            $('#department').find('a').eq(0).trigger('click');

        });

        var Department = {

            id: 0,

            layerIndex: 0,

            search:function() {

                $.ajax({
                    type: 'GET',
                    url: '/admin/department/search',
                    data: {
                        id: Department.id
                    },
                    success: function (res) {
                        if (res.code == 200) {
                            $('#department').html(res.data.html);
                            department_select_html = res.data.select;
                        } else {
                            layer.alert(res.message, {icon: 2, offset: '50px'});
                        }
                    }
                });

            },

            edit: function (flg) {

                var html = '<form id="department-form" onsubmit="return false;" class="form-horizontal" role="form">';

                html += '<div class="department_father"><div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="parentID"><span class="red pr5">*</span> <span>上级部门</span>：</label>';
                html += '<div class="col-sm-9">';
                html += '<select class="form-control" id="parentID" name="parentID">';
                html += '<option value="0">顶级部门</option>';
                html += department_select_html;
                html += '</select>';
                html += '</div></div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="departmentName"><span class="red pr5">*</span> 部门名称：</label>';
                html += '<div class="col-sm-9">';
                html += '<input class="form-control" type="text" id="departmentName" name="departmentName" maxlength="20" value="" placeholder="请输入部门名称">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="sort"><span class="red pr5">*</span> 排序：</label>';
                html += '<div class="col-sm-9">';
                html += '<input class="form-control" type="text" id="sort" name="sort" maxlength="20" value="" placeholder="请输入排序">';
                html += '</div>';
                html += '</div>';

                html += '</form>';

                this.layerIndex = layer.open({
                    title: flg == 1 ? '添加部门' : '编辑部门',
                    type: 1,
                    offset: '50px',
                    area: '450px',
                    content: html,
                    btn: ['保存', '取消'],
                    yes: function() {

                        var dt = E.getFormValues('department-form');

                        if (dt.departmentName == '') {
                            layer.alert('请输入部门名称', {icon: 2, offset: '70px'});
                            return false;
                        }
                        if (dt.sort == '') {
                            layer.alert('请输入排序', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (flg == 1) {
                            dt.departmentID = 0;
                        } else {
                            dt.departmentID = Department.id;
                        }

                        $.ajax({
                            type: 'POST',
                            url: '/admin/department/store',
                            data: dt,
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert('部门保存成功', {icon: 1, offset: '70px', time: 1500});
                                    if (flg == 2) {
                                        layer.close(Department.layerIndex);
                                    } else {
                                        $('#parentID').val(0);
                                        $('#departmentName').val('');
                                        $('#sort').val('');
                                    }
                                    Department.search();
                                } else {
                                    layer.alert(res.message, {icon: 2, offset: '70px'});
                                }
                            }
                        });

                    }
                });

                if (flg == 2) {

                    $.ajax({
                        type: 'GET',
                        url: '/admin/department/get',
                        data: {
                            departmentID: Department.id
                        },
                        success: function (res) {
                            if (res.code == 200) {
                                $('#departmentName').val(res.data.departmentName);
                                $('#parentID').val(res.data.parentID);
                                $('#sort').val(res.data.sort);
                            } else {
                                layer.alert(res.message, {icon: 2, offset: '50px'});
                                layer.close(Department.layerIndex);
                            }
                        }
                    });

                } else {
                    $('#parentID').val(Department.id);
                }

            },

            del: function () {
                layer.confirm('您确认要删除选择的部门吗？', {icon: 3 }, function (index) {
                    layer.close(index);
                    $.ajax({
                        type: 'GET',
                        url: '/admin/department/delete/' + Department.id,
                        success: function (res) {
                            if (res.code == 200) {
                                layer.alert('部门删除成功', {icon: 1, offset: '70px', time: 1500});
                                var department = $('#department');
                                department.find('a.active').remove();
                                department.find('a').eq(0).trigger('click');
                            } else {
                                layer.alert(res.message, {icon: 2, offset: '50px'});
                                layer.close(Department.layerIndex);
                            }
                        }
                    });

                });
            }
        };

    </script>

    <script>

        // 设置全局的tableURL，这种方式主用于base.js里表格查询的参数设置
        var bootstrap_table_ajax_url  = '/admin/usr/search';
        var is_load_table = false;

        var User = {

            search: function () {
                if (is_load_table) {
                    $('#table').bootstrapTable('refresh', {url: bootstrap_table_ajax_url} );
                } else {
                    is_load_table = true;
                    //加载表格
                    $('#table').bootstrapTable({
                        classes: 'table table-hover', //bootstrap的表格样式
                        sidePagination: 'server', //获取数据方式【从服务器获取数据】
                        pagination: true, //分页
                        height: $(window).height() - 200, //表格高度
                        pageNumber: 1, //页码【第X页】
                        pageSize: 10, //每页显示多少条数据
                        queryParamsType: 'limit',
                        striped: true,
                        queryParams: function (params) {
                            var dt = E.getFormValues('search-form');
                            dt.departmentID = Department.id;
                            $.extend(params, dt);
                            return params;
                        },
                        url: bootstrap_table_ajax_url ,//ajax链接
                        sortName: 'createTime', //排序字段
                        sortOrder: 'DESC',//排序方式
                        columns: [ //字段
                            { title: '操作', field: 'operation', align: 'center' },
                            { title: '姓名', field: 'trueName', align: 'left'  },
                            { title: '部门',  field: 'departmentName', align: 'left' },
                            { title: 'email', field: 'email', align: 'left' },
                            { title: '手机', field: 'mobile', align: 'center' }
                        ]
                    });
                }

            },

            edit: function (uuid) {

                var html = '<form id="user-form" onsubmit="return false;" class="form-horizontal" role="form">';

                html += '<input type="hidden" name="uuid" id="uuid" value="' + uuid + '">';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="userID"><span class="red pr5">*</span> 用户名：</label>';
                html += '<div class="col-sm-9">';
                html += '<input class="form-control" type="text" id="userID" name="userID" maxlength="20" placeholder="请输入用户名">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="trueName"><span class="red pr5">*</span> 真实姓名：</label>';
                html += '<div class="col-sm-9">';
                html += '<input class="form-control" type="text" id="trueName" name="trueName" maxlength="20" placeholder="请输入真实姓名">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="departmentID"><span class="red pr5">*</span> <span>所属部门</span>：</label>';
                html += '<div class="col-sm-9">';
                html += '<select class="form-control" id="departmentID" name="departmentID">';
                html += '<option value="0">请选择部门</option>';
                html += department_select_html;
                html += '</select>';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for=""><span class="red pr5">*</span> 部门负责人：</label>';
                html += '<div class="col-sm-8">';
                html += '<label class="radio-inline"> <input type="radio" class="square-radio aa" name="personLiable" value="0" checked>不是</label>';
                html += '<label class="radio-inline"> <input type="radio" class="square-radio aa" name="personLiable" value="1">是</label> ';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="email"><span class="red pr5">*</span> email：</label>';
                html += '<div class="col-sm-9">';
                html += '<input class="form-control" type="text" id="email" name="email" maxlength="30" value="" placeholder="请输入email">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="mobile"><span class="red pr5">*</span> 手机号：</label>';
                html += '<div class="col-sm-9">';
                html += '<input class="form-control" type="text" id="mobile" name="mobile" maxlength="11" value="" placeholder="请输入手机号">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="roleID"><span class="red pr5">*</span> <span>用户角色</span>：</label>';
                html += '<div class="col-sm-9">';
                html += '<select class="form-control" id="roleID" name="roleID">';
                html += '<option value="0">请选择员工角色</option>';
                $.each(roles, function(k, v) {
                    html += '<option value="' + v.roleID + '"> ' + v.roleName + '</option>';
                });
                html += '</select>';
                html += '</div>';
                html += '</div>';

                html += '</form>';

                layer.open({
                    title: uuid == '' ? '新增员工' : '修改员工',
                    type: 1,
                    offset: '50px',
                    area: ['450px', '410px'],
                    scrollbar: false,
                    content: html,
                    btn: ['保存', '取消'],
                    yes: function (index) {
                        var dt = E.getFormValues('user-form');

                        //验证单
                        if (E.isEmpty(dt.userID)) {
                            layer.alert('请输入用户名', {icon: 2, offset: '70px'});
                            return false;
                        }
                        if (E.isEmpty(dt.trueName)) {
                            layer.alert('请选择真实姓名', {icon: 2, offset: '70px'});
                            return false;
                        }
                        if (E.isEmpty(dt.departmentID)) {
                            layer.alert('请输入所属部门', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (!E.isEmail(dt.email)) {
                            layer.alert('请输入email', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (!E.isMobile(dt.mobile)) {
                            layer.alert('手机号码必须为11位有效数字', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (!E.isDigital(dt.roleID)) {
                            layer.alert('请选择用户角色', {icon: 2, offset: '70px'});
                            return false;
                        }

                        $.ajax({
                            type: 'POST',
                            url: '/admin/usr/store',
                            data: dt,
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert('员工信息保存成功', {icon: 1, offset: '70px', time: 1500});
                                    if (uuid) {
                                        layer.close(index);
                                    } else {
                                        $('#userID').val('');
                                        $('#trueName').val('');
                                        $('#userPwd').val('');
                                        $('#departmentID').val(0);
                                        $('#email').val('');
                                        $('#mobile').val('');
                                        $('#roleID').val(0);
                                        $('[name="personLiable"][value="0"]').iCheck('check');
                                    }
                                    User.search();
                                } else {
                                    layer.alert(res.message, {icon: 2, offset: '70px'});
                                }
                            }
                        });

                    }
                });

                if (uuid) {
                    $.ajax({
                        type: 'get',
                        url: '/admin/usr/detail/' + uuid,
                        success: function (res) {
                            if (res.code == 200) {
                                $('#userID').val(res.data.userID).attr('disabled', true);
                                $('#trueName').val(res.data.trueName);
                                $('#departmentID').val(res.data.departmentID);
                                $('#email').val(res.data.email);
                                $('#mobile').val(res.data.mobile);
                                $('#roleID').val(res.data.roleID);
                                $('[name="personLiable"][value='+ res.data.personLiable +']').iCheck('check');
                            } else {
                                layer.alert(res.message, {icon: 2, offset: '70px'});
                            }
                        }
                    });
                } else {
                    $('#departmentID').val(Department.id);
                }

                //  checkbox.radio的check样式
                $('.square-radio').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%' // optional
                });

            },

            //删除用户
            del:function(uuid){
                layer.confirm('您确认要删除该员工吗？', {icon: 3, offset: '100px'}, function (index) {
                    layer.close(index);
                    $.ajax({
                        type: 'get',
                        url: '/admin/usr/delete/' + uuid,
                        success: function (res) {
                            if (res.code == 200) {
                                layer.alert('员工删除成功', {icon: 1, offset: '70px', time: 1000});
                                $('#table').bootstrapTable('refresh');
                            } else {
                                layer.msg(res.message, {icon: 2, offset: '70px'});
                            }
                        }
                    });
                });
            }

        };
    </script>

@endsection
